<ion-header>
	<ion-toolbar>
		<ion-title>设置</ion-title>
		<ion-buttons slot="end">
			<ion-button color="primary" (click)="close()">
				<ion-icon slot="start" name="close"></ion-icon>
				<ion-label>关闭</ion-label>
			</ion-button>
		</ion-buttons>
	</ion-toolbar>
</ion-header>

<ion-content>
	<ion-list>
		<ion-item>
			<ion-label>语言</ion-label>
			<ion-select placeholder="选择语言" [(ngModel)]="setting.language" interface="popover" okText="确定" cancelText="取消">
				<ion-select-option *ngFor="let l of languages" [value]="l.code">{{ l.label ? l.label : l.code | titlecase }}
				</ion-select-option>
			</ion-select>
		</ion-item>
		<ion-item>
			<ion-label>主题</ion-label>
			<ion-select placeholder="选择主题" [(ngModel)]="setting.theme" okText="确定" cancelText="取消">
				<ion-select-option value="vs">浅色</ion-select-option>
				<ion-select-option value="vs-dark">深色</ion-select-option>
				<ion-select-option value="hc-black">黑色</ion-select-option>
			</ion-select>
		</ion-item>
		<ion-item>
			<ion-label>折行方式</ion-label>
			<ion-select placeholder="选择折行方式" [(ngModel)]="setting.wordWrap" okText="确定" cancelText="取消">
				<ion-select-option value="off">不折行</ion-select-option>
				<ion-select-option value="on">视区宽度折行</ion-select-option>
				<ion-select-option value="wordWrapColumn">单词边界折行</ion-select-option>
				<ion-select-option value="bounded">最小宽度折行</ion-select-option>
			</ion-select>
		</ion-item>
		<ion-item>
			<ion-label>鼠标滚动放大</ion-label>
			<ion-toggle slot="end" [(ngModel)]="setting.mouseWheelZoom"></ion-toggle>
		</ion-item>
		<ion-item>
			<ion-label>字号 ({{ setting.fontSize }})</ion-label>
			<ion-range min="8" max="40" [(ngModel)]="setting.fontSize" pin="true">
				<ion-label slot="start">8</ion-label>
				<ion-label slot="end">40</ion-label>
				<ion-icon size="small" slot="start" name="language"></ion-icon>
				<ion-icon slot="end" name="language"></ion-icon>
			</ion-range>
		</ion-item>
		<ion-item>
			<ion-label>自动刷新</ion-label>
			<ion-toggle slot="end" [(ngModel)]="setting.autoRefresh"></ion-toggle>
		</ion-item>
		<ion-item *ngIf="setting.autoRefresh">
			<ion-label>刷新 ({{ setting.interval }})</ion-label>
			<ion-range min="1" max="60" [(ngModel)]="setting.interval" pin="true">
				<ion-label slot="start">1秒</ion-label>
				<ion-label slot="end">60秒</ion-label>
				<ion-icon size="small" slot="start" name="stopwatch"></ion-icon>
				<ion-icon slot="end" name="stopwatch"></ion-icon>
			</ion-range>
		</ion-item>
	</ion-list>
</ion-content>
